<template>
    <div class="friend_panel">
        <FriendItem v-for="(item, index) in friends" :key="index" :friend="item" @click="clickHandle(item)">
        </FriendItem>
        <div class="count">
            <span>一共{{ friends.length }}位好友</span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import FriendItem, { type FriendItemType } from './FriendItem.vue';

const router = useRouter();

const props = defineProps({
    friends: {
        type: Array<FriendItemType>,
        required: true,
    }
})

const clickHandle = (item: FriendItemType) => {
    router.push({
        name: 'chatpannel',
        params: {
            id: item.userId
        }
    });
}

</script>

<style lang="scss" scoped>
.friend_panel {
    flex: 1;
    background-color: rgb(255, 255, 255);
    padding: 10px;

    .count {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        padding: 20px;
        user-select: none;
    }
}
</style>
